import { ref, reactive, computed, type FunctionalComponent as FC } from 'vue';
import type { SeriesDataItem } from '@/store/modules/projectDetail/type';
import '../styles/stepForm.less';
interface Prop {
  data: SeriesDataItem;
}
const SecondAlert: FC<Prop, any> = (props, ctx) => {
  const ControlTypes = {
    text: '文本框',
    select: '下拉框',
    radiobox: '单选框',
    checkbox: '复选框',
    child_select: '二级下拉菜单',
  };
  return (
    <div class="series-box">
      <div class="series-type">
        <div>控件类型</div>
        <div>{ControlTypes[props.data.type]}</div>
      </div>
      <div class="series-title">
        <div>{ControlTypes[props.data.type]}标题</div>
        <div>{props.data.name}</div>
      </div>
      {props.data.data && getOptions(props.data)}
    </div>
  );
};

const getOptions = (data: SeriesDataItem) => {
  const tempArr: { text: string; code: string; value: boolean }[] = JSON.parse(
    data.data
  );
  return tempArr.map((item, index) => (
    <div class="options-box">
      <div class="option-name">
        <div class="name">选项{index + 1}</div>
        <div class="value">{item.text}</div>
      </div>
      <div class="option-value">
        <div class="name">默认值</div>
        <div class="value">{item.code}</div>
      </div>
    </div>
  ));
};

export default SecondAlert;
